<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES6 Class类 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES6 Class类
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/09/26 18:00 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES6新特性</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<p><code>ES6</code>提供了更接近传统语言的写法，引入了<code>Class</code>这个概念作为对象的模板，通过<code>Class</code>关键字可以定义类</p>
<p><code>ES6</code>的<code>Class</code>的绝大部分功能都可以在<code>ES5</code>中实现，新的<code>Class</code>写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已</p>
<h2><a id="es5%E4%B8%8Ees6%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8C%BA%E5%88%AB" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>ES5与ES6实例化对象的区别</h2>
<h3><a id="es5%E9%80%9A%E8%BF%87%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%AF%B9%E8%B1%A1" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>ES5通过构造函数实例化对象</h3>
<pre class="line-numbers"><code class="language-js">//声明函数
function Phone(brand,price){
    this.brand = brand;
    this.price = price;
}

//添加方法
Phone.prototype.call = function(){
    console.log('可以打电话');
}

//实例化对象
let Huawei = new Phone('华为',6999);
Huawei.call(); //输出 '可以打电话'
console.log(Huawei); //输出 Phone {brand: &quot;华为&quot;, price: 6999, call: function}
</code></pre>
<h3><a id="es6%E9%80%9A%E8%BF%87class%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%AF%B9%E8%B1%A1" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>ES6通过Class实例化对象</h3>
<pre class="line-numbers"><code class="language-js">class Phone{
    //构造方法（名称固定）
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }

    //方法必须使用该语法，不能使用ES5的对象完整形式
    // 如：call:function() {}
    call(){
        console.log('可以打电话');
    }
}
//实例化对象
let OnePlus = new Phone('一加', '5999');
OnePlus.call(); //输出 '可以打电话'
console.log(OnePlus); //输出 Phone {brand: &quot;一加&quot;, price: &quot;5999&quot;}
</code></pre>
<h2><a id="class%E7%9A%84%E9%9D%99%E6%80%81%E6%88%90%E5%91%98" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Class的静态成员</h2>
<p>在<code>Class</code>类中，使用<code>static</code>声明的属性和方法，属于类，但不属于实例化对象</p>
<pre class="line-numbers"><code class="language-js">class Phone{
    //静态属性
    static name = '手机';
    static call(){
        console.log('可以打电话')
    }
}

let nokia = new Phone();
console.log(nokia.name); //输出 undefined
console.log(Phone.name); //输出 '手机'
</code></pre>
<h2><a id="%E5%AF%B9%E8%B1%A1%E7%BB%A7%E6%89%BF" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>对象继承</h2>
<h3><a id="es5%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%BB%A7%E6%89%BF" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>ES5 构造函数继承</h3>
<ul>
<li>使用<code>call()</code>调用构造函数</li>
<li>使用<code>prototype</code>设置父类构造函数为子类的原型</li>
</ul>
<pre class="line-numbers"><code class="language-js">//父类构造函数
function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}
Phone.prototype.call = function () {
    console.log('可以打电话');
}

//子类构造函数
function SmartPhone(brand, price, color, size) {
    Phone.call(this, brand, price); //通过call()方法调用父类构造函数Phone
    this.color = color;
    this.size = size;
}

//设置子级构造函数的原型
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;
</code></pre>
<h3><a id="es6-class%E7%B1%BB%E7%BB%A7%E6%89%BF" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>ES6 Class类继承</h3>
<ul>
<li>使用<code>extends</code>关键字继承Class类</li>
<li>使用<code>super()</code>方法调用父类的<code>constructor</code>方法</li>
</ul>
<pre class="line-numbers"><code class="language-js">//父类
class Phone {
    //构造方法
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }
    //成员属性
    call() {
        console.log('可以打电话')
    }
}

//子类
class SmartPhone extends Phone {
    //构造方法
    constructor(brand, price, color, size) {
        //super()调用父类的constructor方法
        //相当于ES5中的Phone.call()
        super(brand, price);
        this.color = color;
        this.size = size;
    }

    //成员属性
    photo() {
        console.log('可以拍照');
    }
}
</code></pre>
<h3><a id="%E5%AD%90%E7%B1%BB%E5%AF%B9%E7%88%B6%E7%B1%BB%E7%9A%84%E6%96%B9%E6%B3%95%E9%87%8D%E5%86%99" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>子类对父类的方法重写</h3>
<ul>
<li>可以在子类中声明一个父类的同名方法</li>
<li>在子类声明的方法中不能直接调用父类的同名方法</li>
</ul>
<pre class="line-numbers"><code class="language-js">//父类
class Phone {
    //构造方法
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }
    //成员属性
    call() {
        console.log('可以打电话')
    }
}

//子类
class SmartPhone extends Phone {
    //构造方法
    constructor(brand, price, color, size) {
        //super()调用父类的constructor方法
        //相当于ES5中的Phone.call()
        super(brand, price);
        this.color = color;
        this.size = size;
    }

    //成员属性
    photo() {
        console.log('可以拍照');
    }
    
    //声明父类的同名方法
    call() {
        console.log('可以视频通话');
    }
}
</code></pre>
<h2><a id="get%E5%92%8Cset" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Get和Set</h2>
<p>可以对对象的属性进行方法的绑定</p>
<h3><a id="get" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Get</h3>
<ul>
<li>通过<code>get</code>声明的属性被读取时，自动调用绑定的函数</li>
<li>该属性的值就是函数内<code>return</code>的返回值</li>
</ul>
<pre class="line-numbers"><code class="language-js">class Phone {
    get price() {
        console.log('价格属性被读取');
        return 1999; //
    }
}

let s = new Phone();
console.log(s.price);//输出 '价格属性被读取' 1999
</code></pre>
<h3><a id="set" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Set</h3>
<ul>
<li>通过<code>set</code>声明的属性被修改时，自动调用绑定的函数</li>
</ul>
<pre class="line-numbers"><code class="language-js">class Phone {
    set price(val) {
        console.log('价格属性被修改');
    }
}

let s = new Phone();
s.price = 1; //输出 '价格属性被修改'
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>